<template>
  <div class="y-com-switch" theme1 y-flexX :style="{ height: height, fontSize: fontsize }" v-if="type === 0">
    <template v-for="(item,index) in list" :key="index">
      <li y-flexX
          class="y-com-switch-item"
          :class="{'y-com-switch-item-active': index === active}"
          @click="clickone(index, item)"
      >{{item.text}}</li>
    </template>
  </div>
  <div class="y-com-switch" theme y-flexX :style="{ height: height, fontSize: fontsize }" v-if="type === 1">
    <template v-for="(item,index) in list" :key="index">
      <li y-flexX
          class="y-com-switch-item"
          :class="{'y-com-switch-item-active ': index === active}"
          @click="clickone(index, item)"
      >{{item.text}}</li>
    </template>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  name: 'YcomSwith',
  emits: ['chage'],
  props: {
    list: { type: Array, required: true },
    index: { type: Number, default: 0 },
    height: { type: String, default: '' },
    fontsize: { type: String, default: '' },
    type: { type: Number, default: 0 }
  },
  setup (props, context) {
    const data = reactive({
      active: props.index,
      props
    })
    let YTimer = null
    function clickone (index, item) {
      const YNum = 200
      if (YTimer) {
        window.$Ycom.$emit('y-com-newtip-addone', ['请勿频繁操作', 6000, 'err'])
        clearTimeout(YTimer)
        YTimer = null
        YTimer = setTimeout(() => {
          clearTimeout(YTimer)
          YTimer = null
        }, YNum)
        return
      }
      YTimer = setTimeout(() => {
        clearTimeout(YTimer)
        YTimer = null
      }, YNum)
      data.active = index
      context.emit('chage', item)
    }
    return {
      ...toRefs(data),
      clickone
    }
  }
}
</script>

<style scoped>
  .y-com-switch {
    width: var(--y-com-width-percent);
    height: var(--y-com-hight-control1);
    border-radius: var(--y-com-radius0);
    user-select: none !important;
    padding: var(--y-com-padding0);
    box-sizing: border-box;
    margin: var(--y-com-margin0) auto;
  }
  .y-com-switch-item{
    flex: 3;
    cursor: pointer;
    height: 100%;
    /* font-weight: var(--y-com-fontWeigh); */
    border-radius: inherit;
    transition: var(--y-com-transition0);
    margin-right: .5vw;
  }
  .y-com-switch-item:last-child{
    margin-right: 0;
  }
  .y-com-switch-item:hover{
    flex: 5;
    background-color: rgba(159, 159, 159, 0.171);
  }
  .y-com-switch-item-active{
    flex: 4;
    /* color: white; */
    /* background-color: var(--y-com--theme) !important; */
    background-color: var(--y-com-themeborderColor2) !important;
    color: var(--y-com--theme) ;
  }
</style>
